<template>
  <div>
    <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }" class="prove-info-from">
      <a-row class="user-info">
       <a-col :span="10">
          <a-row align="middle">
            <a-col>
              <a-form-item label="用户账号">
                <a-input size="small" :disabled="true" :value="proveInfo.nickname"></a-input>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="姓名">
                <a-input size="small" :disabled="true" :value="proveInfo.realName"></a-input>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="地址">
                <a-input size="small" :disabled="true" :value="proveInfo.address"></a-input>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="手机号码">
                <a-input size="small" :disabled="true" :value="proveInfo.phone"></a-input>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="注册时间">
                <a-input size="small" :disabled="true" :value="dataReset(proveInfo.createTime)"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
       </a-col>
       <a-col :span="6">
         
       </a-col>
       <a-col :span="8">
           <a-form-item label="头像">
             <img :src="proveInfo.headImg">
           </a-form-item>
       </a-col>
      </a-row>

      <a-row>
            <a-col :span="12">
                <a-row>
                  <a-form-item label="身份证照片人像面">
                      <img :src="proveInfo.idCardFace" style="width: 95%; height: 160px">
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="身份证照片国徽面">
                      <img :src="proveInfo.idCardBack" style="width: 95%; height: 160px">
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="手持身份证人像面正面照">
                      <img :src="proveInfo.idCardHead" style="width: 95%; height: 160px">
                  </a-form-item>
                </a-row>
            </a-col>
            <a-col :span="12">
                <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }">
                <a-row>
                  <a-form-item label="身份证号">
                      <a-input :value="proveInfo.idCard"></a-input>
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="性别">
                      <a-input :value="proveInfo.gender===1?'男':'女'"></a-input>
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="居住地">
                      <a-input :value="proveInfo.simpleCity"></a-input>
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="详细地址">
                      <a-textarea :value="proveInfo.address"></a-textarea>
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="领域签名">
                      <a-input :value="proveInfo.sign"></a-input>
                  </a-form-item>
                </a-row>
                <a-row>
                    <a-form-item label="证明材料">
                      <img :src="img" style="width: 60px; height: 60px; margin: 5px;" 
                      v-for="(img,index) in GetProveImgs" :key="index">
                    </a-form-item>
                </a-row>

                </a-form>
            </a-col>
        </a-row>

        <a-row>
          <h2>审核结果</h2>
        </a-row>

        <a-row>
            <a-col :span="6">
          <a-select v-model="passInfo">
            <a-select-option key="1" value="pass">通过</a-select-option>
            <a-select-option key="2" value="unpass">拒绝</a-select-option>
          </a-select></a-col>
        </a-row>

        <br>
        <div v-show="passInfo==='pass'?false:true">
            <a-row>
              <h2>拒绝原因</h2>
            </a-row>
            <a-row>
              <a-col :span="24">
                  <a-textarea rows="10" cols="20" v-model="remark"
                  placeholder="最多支持200个汉字长度" style="resize: none"></a-textarea>
              </a-col>
            </a-row>
            <br>
        </div>

        <a-row>
          <a-col :span="6">
              <a-button type="" @click="chance">取消</a-button>
          </a-col>
          <a-col :span="6">
              <a-button @click="submit">确定</a-button>
          </a-col>
        </a-row>
    </a-form>


  </div>
</template>

<script>
import moment from "moment";
import { getProveInfo, submitStatus } from "@/api/user/Renz";

export default {
    data() {
        return {
            remark: '',
            passInfo: 'pass',
            proveInfo: {},
        }
    },
    methods:{
        dataReset: (time) => {
            return moment(time).format("YYYY-MM-DD");
        },
        //==================hide、showFrom==========
        hideInfoFrom(){
            this.showInfo = false;
        },
        showInfoFrom(){
            this.showInfo = true;
        },
        //==========api===========
        showRenzInfoFrom(){
            console.log("=====id====",this.id)
            getProveInfo({
                id: this.id,
            }).then((res)=> {
                let list = res.data.data;
                console.log("========认证信息=======", list);
                //console.log(list.filter(item=> this.GetUser.id === item.id)[0]);
                this.proveInfo = list;
                
                this.showRenzInfo = true;
            })
        },
        submitStatus({reviewStatus, remark}){
            submitStatus({
                id: this.id,
                reviewStatus: reviewStatus,
                remark: remark,
            }).then((res)=> {
                console.log(res);
                if(res.data.status === "1") this.chance();
            })
        },
        //========from==============
        chance(){
            this.$router.go(-1);
        },
        submit(){
            let reviewStatus = this.passInfo==="pass"?1:-1;
            let remark = this.remark;
            this.submitStatus({reviewStatus, remark});
        },
    },
    mounted(){
        this.showRenzInfoFrom();
    },
    computed:{
        GetProveImgs(){
            if(this.proveInfo.signImgs) return this.proveInfo.signImgs.split(",");
            else return ['','','','',''];
        },
    },
    props:["id"],
}
</script>

<style>
    .prove-info-from{
        overflow: scroll;
        width: 100%;
        height: 750px;
        padding: 60px;
    }
</style>